<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Person Regist</title>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
	body{ 
		text-align:center
	} 
	.add-div{
		text-align: center;
	}
	.show-div{
		text-align: center;
	}
	.show-table{
		text-align: center;
	}
	#show-table tr td{
            text-align: left;
            padding: 5px 20px;
        }
   .modal-body{
   		float: left;
   }
   .add-div{
   		float: left;
   }
</style>
</head>
<body>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  	<div class="modal-dialog" role="document">
    	<div class="modal-content">
      	<div class="modal-header">
        	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        	<h4 class="modal-title" id="myModalLabel">Modal title</h4>
      	</div>
      	<div class="modal-body">
        	<span>name:</span><input type="text" name="update-name"/><br/>
			<span>sex:</span><input type="radio" name="update-sex" checked="checked" value="true">ma
			<input type="radio" name="update-sex" value="false">women <br/>
			<span>sal:</span><input type="number" name="update-sal"><br/>
			<span>birth:</span><input type="date" name="update-birth"/><br/>
     	</div>
      	<div class="modal-footer">
       		<button type="button" id="update-btn"  class="btn btn-default" data-dismiss="modal">Update</button>
        	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      	</div>
    </div>
  </div>
</div>
	<div>
		<div id="add-div">
			<span>name:</span><input type="text"  name="name"/><br/>
			<span>sex:</span><input type="radio" name="sex" checked="checked" value="true">ma
			<input type="radio" name="sex" value="false">women <br/>
			<span>sal:</span><input type="number" name="sal"><br/>
			<span>birth:</span><input type="date" name="birth"/><br/>
            <button id="add">add</button>
		</div>
		<div id="show-div">
			<table id="show-table">
				<tr>
					<td>姓名</td>
					<td>性别</td>
					<td>薪水</td>
					<td>生日</td>
                    <td>更新</td>
                    <td>删除</td>
				</tr>
			</table>
		</div>
	</div>
	<script type="text/javascript">
		//立即执行函数
		(function(){
				var obj={};
				//用来设置ajax回调函数的上下文。让回调函数中的this指向这个对象。
				obj.ajax = function(type, url, data, headers, context, callback){
				$.ajax({
					type: type,
					url: url,
					data: JSON.stringify(data),
					headers: headers,
					context:context
				}).done(callback);
			};
			window.ajaxHandler = obj;
		})();
			
            function personRegisterInofo(){
            	var person_id = "";
				var d_u_btn;
                var person = {
                    id: "",
                    name: "",
                    sex: "",
                    sal: "",
                    birth: ""
                };
                this.setPerson_id = function(id){
                	person_id = id;
				}
				this.setBtn = function(btn){
					d_u_btn = btn;
				}
                this.setAddPersonInfo = function(){
                    person.name = $("input[name='name']").val();
                    person.sex = $("input[name='sex']:checked").val();
                    person.sal = $("input[name='sal']").val();
                    person.birth = $("input[name='birth']").val();
                    console.log(person.name+"...."+person.sal+"...")
                };
                this.setUpdatePersonInfo = function(id){
                    person.id = id;
                    person.name = $("input[name='update-name']").val();
                    person.sex = $("input[name='update-sex']").val();
                    person.sal = $("input[name='update-sal']").val();
                    person.birth = $("input[name='update-birth']").val();
                };
                this.getPerson_id = function(id){
					return person_id;
				};
				this.getBtn = function(btn){
					return d_u_btn;
				}
				this.getPersonInfo = function(btn){
					return person;
				}
                this.clearPersonInfo = function(){
                    person.name = "";
                    person.sex = "";
                    person.sal = "";
                    person.birth = "";
                    person.id = "";
                    $("input[name='update-name']").val("");
                    $("input[name='update-sex']").val("");
                    $("input[name='update-sal']").val("");
                    $("input[name='update-birth']").val("");
                };
            };
            
            function operator( table){
            	var personInfo = new personRegisterInofo();
            	var table = table;
                this.findAll = function(){
                	ajaxHandler.ajax("GET","findAllPerson",null,{"Content-Type":"application/json"},this,function(persons){
                		 persons.forEach(function(item){
                			 _render(item);
                		 });
        			});
                };
				this.add = function(){
					personInfo.setAddPersonInfo();
					ajaxHandler.ajax("POST","addPerson",personInfo.getPersonInfo(),{"Content-Type":"application/json"},this,function(msg){
						_render(msg);
					});
					personInfo.clearPersonInfo();
                };
                function del(id,btn){
					ajaxHandler.ajax("DELETE","deletePerson?id="+id,personInfo.getPerson_id(),{"Content-Type":"application/json"},this,function(msg){
						btn.parent().parent().remove();
					});
                };
                function update(id,btn){
                	//初始化更新的person数据 
                	personInfo.setUpdatePersonInfo(id);
                	ajaxHandler.ajax("PUT","updatePerson",personInfo.getPersonInfo(),{"Content-Type":"application/json"},this,function(msg){
                		btn.parent().parent().remove();
						_render(msg);
					});
                	personInfo.clearPersonInfo();
                };
                function _render(msg){
	                var tr = $("<tr></tr>").val(msg.id);
	                table.append(tr);
	                tr.append($("<td></td>").text(msg.name));
	                tr.append($("<td></td>").text(msg.sex));
	                tr.append($("<td></td>").text(msg.sal));
	                var date = new Date(msg.birth);
	                tr.append($("<td></td>").text(date.toString().split(" ").slice(0,5)));
	                var deleteBtn = $("<button id='delete'></button>").text("delete").val(msg.id);
	                var updateBtn = $("<button type='button' data-dismiss='modal' data-toggle='modal' data-target='#myModal'></button>").text("update").val(msg.id);
	                tr.append($("<td></td>").append(deleteBtn));
	                tr.append($("<td></td>").append(updateBtn));
	                deleteBtn.click(function(){
	                	//调用删除操作 
	                	del($(this).val(),$(this));
	                });
	                updateBtn.click(function(){
	                	//跟新操作
	                	var id = $(this).val();
	                	var btn = $(this);
	                	$("#update-btn").click(function(){
	                		update(id, btn);
                		});
	                });
	            };
            };
            
            $(function(){
            	var operatorManager = new operator($("#show-table"));
            	$("#add").click(function(){
            		operatorManager.add();
                });
            	operatorManager.findAll();
        });
	</script>
</body>
</html>